<template>
  <div class="app-container flex">
    <div class="left" id="left">
      <img src="@/assets/imgs/dashboard/jiantou.png" alt="" class="jiantou" @click="transform" v-if="isExpansion" />
      <img src="@/assets/imgs/dashboard/jiantou.png" alt="" class="jiantou jiantou-toL" @click="transform(1)" v-else />
      <div class="count-card flex column common-bgc mb-5">
        <custitle count="01" title="关怀对象统计" unit="人" />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <img class="help-icon" src="@/assets/imgs/help-object.png" alt="" />
          <CountFlop :val="handelPadStart(wbMentalPatienttotalCount, 6)" />
        </div>
      </div>
      <div class="left-item-2 common-bgc">
        <custitle count="02" title="关怀对象障碍等级分布" unit="人" />
        <eCharts ref="careObjectRef" :options="levelOptions" style="width: 100%; height: 154px" />
      </div>
      <div class="left-item-3 common-bgc">
        <custitle count="03" title="关怀对象性别分布" unit="人" />
        <div class="sex-distribution flex">
          <div class="item-l sex-item-style flex">
            <img class="sex-icon" src="@/assets/imgs/man-icon-icon.png" alt="" />
            <div class="r-text">
              <div class="name-text">男性</div>
              <div class="item-percent flex">
                <div class="item-count">{{ wbMentalPatientmanCount }}</div>
                <div class="item-unit">人</div>
              </div>
              <div class="item-dowm flex">
                <div class="item-percent">{{ percentage3 }}%</div>
                <div class="item-text">占比</div>
              </div>
            </div>
          </div>
          <div class="item-r sex-item-style flex">
            <img class="sex-icon" src="@/assets/imgs/female-icon.png" alt="" />
            <div class="r-text">
              <div class="name-text">女性</div>
              <div class="item-percent flex">
                <div class="item-count">{{ wbMentalPatientwomanCount }}</div>
                <div class="item-unit">人</div>
              </div>
              <div class="item-dowm flex">
                <div class="item-percent">{{ percentage4 }}%</div>
                <div class="item-text">占比</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left-item-4 common-bgc">
        <custitle count="04" title="关怀对象年龄分布" unit="人" />
        <eCharts :options="ageDistributionOptions" style="width: 100%; height: 138px" />
      </div>
      <div class="left-item-5 common-bgc">
        <custitle count="05" title="关爱帮扶小组人员" unit="人" />
        <div class="caring-group">
          <div class="l-item">
            <div class="info-wrapper">
              <img class="img-l-png" src="../../../assets/imgs/caring-group-img.png" alt="" />
              <div class="count">{{ wbHelpInfoCount }}</div>
            </div>
            <div class="bottom-text">帮扶人员总数</div>
          </div>
          <div class="r-item">
            <div class="inner-item-wrapper" v-for="(item, index) in wbHelpInfo" :key="index">
              <div class="inner-item">
                <img class="img-l" src="../../../assets/imgs/car-person.png" alt="" />
                <div class="name-text" :title="item.helpPersonTypeText">
                  {{ item.helpPersonTypeText }}
                </div>
                <div class="count-text">{{ item.total }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid f1"></div>
    <div class="right" id="right">
      <div class="count-card flex column common-bgc mb-5">
        <custitle count="06" title="腕表设备统计" unit="个" />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <img class="help-icon" src="@/assets/imgs/watch-icon.png" alt="" />
          <CountFlop :val="handelPadStart(wbDeviceInfoCount, 6)" />
        </div>
      </div>
      <div class="right-item-1 common-bgc">
        <custitle count="07" title="腕表在线状态统计" unit="人" />
        <div class="watch-status">
          <div class="item-l flex item-style">
            <eCharts :options="watchStatusOnlineOptions" style="width: 72px; height: 120px" />
            <div class="r-text">
              <div class="text-top flex">
                <div class="text-box"></div>
                <div class="text-status">在线</div>
              </div>
              <div class="text-middle">{{ wbDeviceInfoOnLineCount }}</div>
              <div class="text-bottom">
                <div class="text-box">占比</div>
                <div class="count-text">{{ percentage1 }} %</div>
              </div>
            </div>
          </div>
          <div class="item-r flex item-style">
            <eCharts :options="watchStatusOfflineOptions" style="width: 72px; height: 120px" />
            <div class="r-text">
              <div class="text-top flex">
                <div class="text-box"></div>
                <div class="text-status">离线</div>
              </div>
              <div class="text-middle">{{ wbDeviceInfoOffLineCount }}</div>
              <div class="text-bottom">
                <div class="text-box">占比</div>
                <div class="count-text">{{ percentage2 }} %</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-item-2 common-bgc">
        <custitle count="08" title="本周异常报警统计" unit="人" />
        <eCharts :options="weekAlarmStatisticOptions" style="width: 100%; height: 230px" />
      </div>
      <div class="right-item-3 common-bgc">
        <custitle count="09" title="设备实时报警" />
        <scroll-board class="device-alarm" :config="config" style="width: 100%; height: 220px" />
      </div>
    </div>
    <map-box></map-box>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import countTo from 'vue-count-to'
import CountFlop from './components/countTo.vue'
import custitle from './components/title.vue'
import eCharts from '@/components/eCharts'
import { comMethods } from '@/mixins/comMethods'
import { eventCountListData, checkCountData } from './echartsData'
import { Cascader, Select, Option } from 'element-ui'
import mapBox from './mapBox.vue'
import * as echarts from 'echarts'
import scrollBoard from '@/components/scrollBoard/src/main.vue'
import { dataClassified, earlyWarningPage, wbDataStatistics } from '../../../api/api'

const generateAgeDistribution = (dataX, dataList) => {
  var data = {
    area: dataX,
    data: [dataList],
  }
  var colors = ['#026CDB']
  var option = {
    color: colors,
    grid: {
      left: '2%',
      right: '0%',
      bottom: '3px',
      top: '20px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#1388FF',
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: '#026CDB',
        },
        width: 5,
      },
      axisTick: {
        show: false,
      },
      data: data.area,
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#1388FF',
        fontSize: 12,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#026CDB',
        },
        width: 5,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        barWidth: '40%',
        data: dataList,
      },
    ],
  }

  return option
}

const generateWeekAlarmStatisticOptions = (dataX, dataList) => {
  let option = {
    xAxis: {
      data: dataX,
      axisLine: {
        lineStyle: {
          color: '#026CDB',
        },
      },
      axisLabel: {
        color: '#E5FCFF',
        fontSize: 14,
      },
    },
    grid: {
      left: '2%',
      right: '0%',
      bottom: '3%',
      top: '40px',
      containLabel: true,
    },
    yAxis: {
      name: '单位:次',
      nameTextStyle: {
        color: '#026CDB',
        fontSize: 12,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#026CDB',
        },
      },
      axisLabel: {
        color: '#026CDBs',
        fontSize: 12,
      },
      splitLine: {
        show: false,
      },
      interval: 500,
    },
    series: [
      {
        type: 'bar',
        barWidth: 40,
        itemStyle: {
          normal: {
            color: '#00FCFF',
          },
        },
        label: {
          normal: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#00FCFF',
            position: 'top',
          },
        },
        data: dataList,
      },
    ],
  }

  return option
}

const generateWatchStatusOnlineOptions = (data, topColor, bottomColor, centerColor, mainColor) => {
  let option = {
    xAxis: {
      data: ['百分比'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035',
        },
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    grid: {
      top: '20px',
      bottom: '20px',
    },
    series: [
      {
        name: '最上层立体圆邊框',
        type: 'pictorialBar',
        symbolSize: [58, 12],
        symbolOffset: [0, -6],
        z: 12,
        itemStyle: {
          normal: {
            color: topColor,
          },
        },
        data: [
          {
            value: 100,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '最底部立体圆邊框',
        type: 'pictorialBar',
        symbolSize: [58, 12],
        symbolOffset: [0, 6],
        z: 12,
        itemStyle: {
          normal: {
            color: data ? bottomColor : '#cccccc',
          },
        },
        data: [100],
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [58, 12],
        symbolOffset: [0, -8],
        z: 12,
        itemStyle: {
          normal: {
            color: centerColor,
          },
        },
        data: [
          {
            value: data,
            symbolPosition: 'end',
          },
        ],
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: mainColor,
          },
        },
        silent: false,
        barWidth: 72,
        barGap: '-100%',
        data: [data],
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: mainColor,
          },
        },
        silent: false,
        barGap: '-100%',
        data: [100 - data],
      },
    ],
  }
  return option
}

const generateLevelOptions = (vm, mockData) => {
  const genRich = (index) => {
    return {
      a: {
        color: '#00FCFF',
        fontSize: 12,
        align: 'left',
      },
      b: {
        color: '#1388FF',
        fontSize: 12,
        width: 40,
      },
      c: {
        color: '#1388FF',
        fontSize: 12,
        width: 40,
      },
      d: {
        color: '#00FCFF',
        fontSize: 12,
        width: 25,
        align: 'right',
      },
      e: {
        color: '#1388FF',
        fontSize: 12,
        align: 'left',
      },
    }
  }
  //接口总数和标题文字
  let value = `${mockData[0].percent}%`
  let title = '占比'
  let currentIndex = 0
  let option = {
    //中间圆形的 文字位置
    title: {
      text: '{a|' + value + '}\n{c|' + title + '}',
      x: '18.5%',
      y: '38%',
      textAlign: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 18,
            color: '#F3487B',
            fontWeight: '600',
          },
          c: {
            fontSize: 14,
            color: '#1388FF',
            padding: [5, 0],
          },
        },
      },
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      top: '8%',
      left: '50%',
      data: mockData.map((item) => item.detail),
      icon: 'circle',
      formatter: (params) => {
        currentIndex = params
        let value = mockData.find((item) => item.detail === params)
        let total = mockData.reduce((total, item) => {
          return total + item.total
        }, 0)
        let percent = Math.round((value.total / total) * 100)
        return `{c|${value.detail}级}{d|${value.total}}{e|人}{b|占比:}{a|${percent}%}`
      },
      textStyle: {
        rich: genRich(currentIndex),
      },
      selectorPosition: 'start',
      align: 'left',
      itemHeight: 10,
      itemWidth: 10,
      itemGap: 6,
      border: 0,
      itemStyle: {
        borderWidth: 0,
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['20%', '50%'],
        clockwise: false,
        avoidLabelOverlap: false,
        hoverOffset: 10,
        legendHoverLink: true,
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {},
        },
        data: mockData.map((item, index) => {
          return {
            value: mockData[index].total,
            name: mockData[index].detail,
            tooltip: formatterVal(),
            itemStyle: item.itemStyle,
          }
        }),
      },
      {
        type: 'pie',
        radius: [0, '50%'],
        hoverAnimation: false,
        clockWise: false,
        center: ['20%', '50%'],
        tooltip: {
          formatter: title + '：' + value,
          textStyle: {
            color: '#000',
          },
          backgroundColor: '#fff',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(19,83,88,0.2);',
        },
        /* tooltip: { //不现实总数的提示
                show: true
            },*/
        itemStyle: {
          normal: {
            borderColor: '#0767dd',
            borderWidth: 2,
            shadowBlur: 6,
            shadowColor: '#444',
            color: '#0f4eb1',
          },
        },
        label: {
          normal: {
            show: false,
          },
        },
        data: [100],
      },
    ],
  }

  function formatterVal() {
    return {
      formatter: '{b}({d}%)',
      textStyle: {
        color: '#000',
      },
      backgroundColor: '#fff',
      extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(19,83,88,0.2);',
    }
  }

  let index = 0

  // 设置定时器来更新标题
  setInterval(function () {
    // 获取当前时间作为标题的一部分
    let title = '占比'
    if (index >= mockData.length) {
      index = 0
    }
    var newTitle = mockData[index].percent + '%'
    // 更新配置项中的标题
    let newOptions = {
      title: {
        ...option.title,
        text: '{a|' + newTitle + '}\n{c|' + title + '}',
        textStyle: {
          rich: {
            a: {
              fontSize: 18,
              color: mockData[index].itemStyle.color,
              fontWeight: '600',
            },
            c: {
              fontSize: 14,
              color: '#1388FF',
              padding: [5, 0],
            },
          },
        },
      },
    }
    vm.$refs.careObjectRef.myChart.setOption(newOptions)
    index++
  }, 2000) // 每5秒更新一次

  return option
}
export default {
  name: 'checkCountData',
  components: {
    CountFlop,
    custitle,
    countTo,
    eCharts,
    'el-cascader': Cascader,
    'el-select': Select,
    'el-option': Option,
    mapBox,
    scrollBoard,
  },
  mixins: [comMethods],
  watch: {},
  data() {
    return {
      ageDistributionOptions: {},
      weekAlarmStatisticOptions: {},
      isExpansion: true,
      config: {
        headerBGC: '#0d469d',
        header: ['报警类型', '报警时间', '处置状态'],
        data: [
          ['行1列1', '行1列2', '<span style="color:#96F601;">行2列2</span>'],
          ['行2列1', '行2列2', '<span style="color:#F8D100;">行2列2</span>'],
          ['行3列1', '行3列2', '<span style="color:#96F601;">行2列2</span>'],
          ['行4列1', '行4列2', '<span style="color:#F8D100;">行2列2</span>'],
          ['行5列1', '行5列2', '<span style="color:#96F601;">行2列2</span>'],
          ['行6列1', '行6列2', '<span style="color:#F8D100;">行2列2</span>'],
          ['行7列1', '行7列2', '<span style="color:#96F601;">行2列2</span>'],
          ['行8列1', '行8列2', '<span style="color:#F8D100;">行2列2</span>'],
          ['行9列1', '行9列2', '<span style="color:#96F601;">行2列2</span>'],
          ['行10列1', '行10列2', '<span style="color:#F8D100;">行2列2</span>'],
        ],
        oddRowBGC: 'linear-gradient(90deg, rgba(66, 157, 250, 0.6) 0%, rgba(66, 157, 250, 0) 100%)',
        evenRowBGC: 'unset',
        columnWidth: [104, 180, undefined],
        align: ['left', 'center', 'left'],
      },

      watchStatusOnlineOptions: {},
      watchStatusOfflineOptions: {},
      levelOptions: {},
      careObjectRef: null,

      wbMentalPatienttotalCount: 0,
      wbMentalPatientwomanCount: 0,
      wbHelpInfoCount: 0,
      wbMentalPatientmanCount: 0,
      wbMentalPatienttotalCount: 0,
      wbMentalPatienttotalCount: 0,
      wbDeviceInfoCount: 0,
      wbMentalPatientwomanCount: 0,
      wbDeviceInfoOnLineCount: 0,
      wbDeviceInfoOffLineCount: 0,
      wbHelpInfo: [],
      percentage1: 0,
      percentage2: 0,
      percentage3: 0,
      percentage4: 0,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const typeMap = {
        1: 'SOS',
        4: '电子围栏触发',
        8: '运动心率异常',
      }
      earlyWarningPage({
        pageNo: 1,
        pageSize: 100,
      }).then((res) => {
        let data = res.result.records.map((item) => {
          return [
            typeMap[item.type] ? typeMap[item.type] : '',
            item.eventTime,
            item.status == '1'
              ? '<span style="color:#96F601;">已处置</span>'
              : '<span style="color:#F8D100;">待处置</span>',
          ]
        })
        this.config = {
          ...this.config,
          data,
        }
      })

      wbDataStatistics().then((res) => {
        const groupArray = (arr, size) => {
          const result = []
          for (let i = 0; i < arr.length; i += size) {
            result.push(arr.slice(i, i + size))
          }
          return result
        }

        const {
          wbMentalPatienttotalCount,
          wbDeviceInfoCount,
          wbHelpInfoCount,
          wbHelpInfo,
          wbMentalPatientwomanCount,
          wbMentalPatientmanCount,
          wbDeviceInfoOnLineCount,
          wbDeviceInfoOffLineCount,
        } = res.result
        this.wbMentalPatienttotalCount = wbMentalPatienttotalCount
        this.wbDeviceInfoCount = wbDeviceInfoCount
        this.wbHelpInfoCount = wbHelpInfoCount
        this.wbMentalPatientwomanCount = wbMentalPatientwomanCount
        this.wbHelpInfo = wbHelpInfo
        this.wbDeviceInfoOnLineCount = wbDeviceInfoOnLineCount
        this.wbDeviceInfoOffLineCount = wbDeviceInfoOffLineCount
        this.wbMentalPatientmanCount = wbMentalPatientmanCount

        // 计算总和
        const total = wbDeviceInfoOnLineCount + wbDeviceInfoOffLineCount
        const total1 = wbMentalPatientmanCount + wbMentalPatientwomanCount

        // 计算第一个值的百分比并保留整数
        const percentage1 = Math.round((wbDeviceInfoOnLineCount / total) * 100)

        // 计算第二个值的百分比并保留整数
        const percentage2 = Math.round((wbDeviceInfoOffLineCount / total) * 100)

        // 男
        const percentage3 = Math.round((wbMentalPatientmanCount / total1) * 100)

        // 计算第二个值的百分比并保留整数
        const percentage4 = Math.round((wbMentalPatientwomanCount / total1) * 100)

        this.watchStatusOnlineOptions = generateWatchStatusOnlineOptions(
          percentage1,
          '#04b1cb',
          'rgba(5, 185, 214, 1)',
          'rgba(0, 252, 255, 1)',
          'rgba(0, 252, 255, 0.2)'
        )
        this.watchStatusOfflineOptions = generateWatchStatusOnlineOptions(
          percentage2,
          '#98be52',
          '#7D9D46',
          '#F8D100',
          'rgba(125, 157, 70, 0.48)'
        )
        this.percentage1 = percentage1
        this.percentage2 = percentage2
        this.percentage3 = percentage3
        this.percentage4 = percentage4
      })

      dataClassified().then((res) => {
        const { level, event, age } = res.result
        const colors = ['#00FCFF', '#9660FF', '#0074EB', '#96F601', '#F8D100', '#F3487B', '#ccc']
        let total = level.reduce((total, item) => {
          return total + item.count
        }, 0)
        let levelOptions1 = level.map((item, index) => {
          let percent = Math.round((item.count / total) * 100)
          return {
            total: item.count,
            detail: item.patient_level !== null ? item.patient_level + '' : '未知',
            itemStyle: { color: colors[index] },
            percent,
          }
        })
        this.levelOptions = generateLevelOptions(this, levelOptions1)
        let dataX = event.map((item) => item.type)
        let dataList = event.map((item) => item.count)
        this.weekAlarmStatisticOptions = generateWeekAlarmStatisticOptions(dataX, dataList)

        let dataX1 = age.map((item) => item.age_group)
        let dataList1 = age.map((item) => item.total)
        this.ageDistributionOptions = generateAgeDistribution(dataX1, dataList1)
      })
    },
    handelPadStart(pm1, pm2) {
      if (pm1 !== undefined) {
        return pm1.toString().padStart(pm2, '0')
      }
    },
    transform(type) {
      this.isExpansion = !this.isExpansion
      const left = document.getElementById('left')
      const right = document.getElementById('right')
      const leftWidth = left.clientWidth + 12
      const rightWidth = right.clientWidth + 12
      const leftTransform = type === 1 ? { x: 0 } : { x: -leftWidth }
      const rightTransform = type === 1 ? { x: 0 } : { x: rightWidth }
      this.$gsap.to(left, leftTransform)
      this.$gsap.to(right, rightTransform)
    },
  },
  destroyed() {},
}
</script>
<style scoped lang="less">
.app-container {
  position: relative;
  overflow: hidden;
  font-family: PingFang SC;
  padding: 10px 16px;
  .common-bgc {
    background: #0e4cab;
    border: 1px solid #006fe0;
    border-top: none;
  }
  .help-icon {
    width: 64px;
    height: 64px;
  }
  .left {
    z-index: 9;
    position: relative;
    width: 380px;

    .bot {
      padding: 10px;
    }

    .jiantou {
      position: absolute;
      top: 0;
      right: -35px;
      z-index: 9999;
      cursor: pointer;
    }
    .jiantou-toL {
      transform: rotateY(180deg);
    }
    .left-item-2 {
      margin-top: 6px;
      margin-bottom: 6px;
    }

    .left-item-3 {
      .sex-distribution {
        padding: 6px 10px;
        .sex-item-style {
          width: 50%;
          .sex-icon {
            width: 34px;
            height: 92px;
          }
          .r-text {
            font-weight: 800;
            font-size: 14px;
            color: #1388ff;
            .name-text {
              font-weight: 800;
              font-size: 14px;
              color: #1388ff;
            }
            .item-percent {
              line-height: 1;
              margin-top: 5px;

              .item-count {
                font-weight: bold;
                font-size: 28px;
                color: #0ac0fe;
                margin-right: 10px;
              }
              .item-unit {
                align-content: end;
              }
            }
            .item-dowm {
              margin-top: 10px;
              line-height: 1;
              .item-percent {
                font-weight: bold;
                font-size: 28px;
                color: #0ac0fe;
                margin-right: 10px;
              }
              .item-text {
                align-content: end;
                flex-shrink: 0;
              }
            }
          }
          .sex-icon {
            width: 34px;
            height: 92px;
            margin-right: 22px;
          }
        }
        .item-l {
        }
        .item-r {
          .sex-icon {
            width: 42px;
            height: 93px;
          }
        }
      }
    }
    .left-item-4 {
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .left-item-5 {
      .caring-group {
        display: flex;
        padding: 10px;
        .l-item {
          margin-right: 12px;
          .info-wrapper {
            position: relative;
            .img-l-png {
              width: 98px;
              height: 84px;
            }
            .count {
              font-weight: bold;
              font-size: 24px;
              color: #01d8ff;
              text-shadow: 0px 0px 13px rgba(43, 159, 242, 0.83);
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .bottom-text {
            font-weight: 400;
            font-size: 13px;
            color: #01d8ff;
            text-align: center;
          }
        }
        .r-item {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          overflow: scroll;
          max-height: 100px;
          /deep/ .slick-slide {
            // width: unset !important;
          }
          .inner-item-wrapper {
            display: flex !important;
            // gap: 10px !important;
            flex-wrap: wrap !important;
            width: 47%;
          }
          .inner-item {
            width: calc(100% - 10px);
            background: rgba(1, 134, 219, 0.2);
            border-radius: 4px;
            opacity: 0.8;
            display: flex;
            align-items: center;
            padding: 4px;
            line-height: 1;
            .img-l {
              width: 16px;
              height: 22px;
            }
            .name-text {
              font-weight: 500;
              font-size: 14px;
              color: #1388ff;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              text-align: left;
            }
            .count-text {
              font-weight: bold;
              font-size: 20px;
              color: #01d8ff;
            }
          }
        }
      }
    }
  }
  .right {
    position: relative;
    z-index: 9;
    width: 380px;
    .bot {
      padding: 10px;
    }
    .right-item-1 {
      margin-top: 6px;
      .watch-status {
        display: flex;
        align-items: center;
        padding-top: 5px;
        .item-style {
          .r-text {
            .text-top {
              align-items: center;
              .text-box {
                width: 13px;
                height: 13px;
                border: 1px solid #00eaff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 5px;
                &::after {
                  content: '';
                  width: 5px;
                  height: 5px;
                  background: #00eaff;
                }
              }
              .text-status {
                font-weight: 500;
                font-size: 14px;
                color: #1388ff;
              }
            }
            .text-middle {
              font-weight: bold;
              font-size: 28px;
              color: #03fbfe;
              padding-left: 18px;
            }
            .text-bottom {
              padding-left: 18px;

              .text-box {
                font-weight: 500;
                font-size: 14px;
                color: #1388ff;
              }
              .count-text {
                font-weight: bold;
                font-size: 22px;
                color: #03fbfe;
              }
            }
          }
        }
        .item-l {
          width: 50%;
        }
        .item-r {
          width: 50%;
          .r-text {
            .text-middle {
              color: #f8d100;
            }
            .text-bottom {
              .count-text {
                color: #f8d100;
              }
            }
          }
        }
      }
    }
    .right-item-2 {
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .right-item-3 {
      .device-alarm {
        /deep/ .header {
          font-size: 14px;
        }
        // /deep/ .row-item:nth-child(odd) {
        //   background: linear-gradient(90deg, #429dfa 0%, rgba(66, 157, 250, 0) 100%) !important;
        //   border-radius: 18px;
        // }
        // /deep/ .row-item:nth-child(even) {
        //   background: unset !important;
        // }
      }
    }
  }
}
</style>
